<template>
  <el-dialog
      :title="!form.id ? '新增' : '修改'"
      :close-on-click-modal="false"
      fullscreen
      :visible.sync="visible">
    <el-form :model="form" ref="form" label-width="120px" class="demo-ruleForm">
<!--      <el-form-item label="审核意见" v-if="form.state && form.state === 8">-->
<!--        <el-input type="textarea" :rows="3" v-model="form.auditOpinion" :disabled="true"></el-input>-->
<!--      </el-form-item>-->
      <el-form-item required label="项目编号" prop="projectCode">
        <el-select v-model="form.projectCode" :disabled="form.id != 0" @change="changeProjectCode" placeholder="请选择">
          <el-option
              v-for="item in projectCodeOptions"
              :key="item.prProjectNumber"
              :label="item.prProjectName"
              :value="item.prProjectNumber">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <table style="border: 1px solid #000000" class="table">
          <tr>
            <th>序号</th>
            <th>检验项目</th>
            <th>质量指标</th>
            <th>检验结果</th>
            <th>判定结果</th>
          </tr>
          <tr>
            <td rowspan="7">1</td>
            <td rowspan="7">安全防护</td>
            <td>
              万向节传动轴、动力输入轴、齿轮传动、皮带传动、链条传动等运动件均应有安全防护装置。
            </td>
            <td>
              万向节传动轴、动力输入轴、齿轮传动、皮带传动、链条传动等运动件
              <el-radio-group v-model="form.hasSafetyDevice">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
              有安全防护装置。
            </td>
            <td>
              <el-input v-model="form.judgmentResult"></el-input>
            </td>
          </tr>
          <tr>
            <td>
              万向节传动轴防护罩和动力输入连接装置防护罩间直线重叠量应不少于50mm。防护罩应包络住至机器的第一个固定轴承座的整个传动轴。工作幅宽大于280cm旋耕机的万向节传动轴应有离合保护装置。
            </td>
            <td>
              万向节传动轴防护罩和动力输入连接装置防护罩间直线重叠量应为<el-input style="width: 80px;" v-model="form.overlapLength"></el-input>mm。防护罩
              <el-radio-group v-model="form.isShieldEnveloping">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
              包络住至机器的第一个固定轴承座的整个传动轴。工作幅宽大于280cm旋耕机的万向节传动轴
              <el-radio-group v-model="form.hasClutchProtection">
                <el-radio :label="true">有</el-radio>
                <el-radio :label="false">无</el-radio>
              </el-radio-group>
              有离合保护装置。
            </td>
            <td>
              <el-input v-model="form.judgmentResultClutch"></el-input>
            </td>
          </tr>
          <tr>
            <td>
              旋耕机工作部件的顶部、后部、前部和端部的防护应符合下面规定：
              a)左右下悬挂点到左右两侧之间应设置前部防护，防护从工作部件最外端运动轨迹向前延伸不小于200mm，离地高度应不大于（400+h）mm（h指使用说明书明示最小耕深）。采用间隔式防护的，防护栅栏的间隙不大于60mm；
            </td>
            <td>
              旋耕机工作部件的顶部、后部、前部和端部的防护
              <el-radio-group v-model="form.meetsRequirements">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
              符合下面规定：
              a）左右下悬挂点到左右两侧之间
              <el-radio-group v-model="form.hasFrontProtection">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
              否设置前部防护，防护从工作部件最外端运动轨迹向前延伸<el-input style="width: 80px;" v-model="form.frontExtensionDistance"></el-input>
              mm，离地高度为<el-input style="width: 80px;" v-model="form.groundClearanceHeight"></el-input>mm（h指使用说明书明示最小耕深）。
              采用间隔式防护的，防护栅栏的间隙<el-input style="width: 80px;" v-model="form.protectiveFences"></el-input>mm；
            </td>
            <td>
              <el-input v-model="form.judgmentResultFront"></el-input>
            </td>
          </tr>
          <tr>
            <td>
              b)左右两侧应设置端部防护，防护从工作部件最外端运动轨迹分别向左右两侧延伸不小于200mm（工作状态下机具两侧防护罩能覆盖地面以上工作部件的除外）。采用间隔式防护的，防护栅栏的间隙不大于80mm；
            </td>
            <td>
              b)左右两侧
              <el-radio-group v-model="form.hasEndProtection">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
              设置端部防护，防护从工作部件最外端运动轨迹分别向左右两侧延伸<el-input style="width: 80px;" v-model="form.sideExtensionDistance"></el-input>mm
              （工作状态下机具两侧防护罩
              <el-radio-group v-model="form.canCoverAboveGround">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
              能覆盖地面以上工作部件的除外）。
              采用间隔式防护的，防护栅栏的间隙为<el-input style="width: 80px;" v-model="form.fenceGap"></el-input>mm。
            </td>
            <td>
              <el-input v-model="form.judgmentResultFence"></el-input>
            </td>
          </tr>
          <tr>
            <td>
              c)顶部防护应覆盖工作部件轨迹最外端区域且不与运动工作部件接触。
            </td>
            <td>
              c)顶部防护
              <el-radio-group v-model="form.coversOuterArea">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
              覆盖工作部件轨迹最外端区域且不与运动工作部件接触。
            </td>
            <td>
              <el-input v-model="form.judgmentResultOuterArea"></el-input>
            </td>
          </tr>
          <tr>
            <td>
              d)后部防护采用铰接式时，应覆盖整个工作部件，工作时始终与地面接触。
            </td>
            <td>
              d)后部防护采用铰接式时，
              <el-radio-group v-model="form.coversWholePart">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
              覆盖整个工作部件，工作时始终与地面接触。
            </td>
            <td>
              <el-input v-model="form.judgmentResultWholePart"></el-input>
            </td>
          </tr>
          <tr>
            <td>
              旋耕机单独停放时应有保持稳定的措施，确保安全。
            </td>
            <td>
              旋耕机单独停放时
              <el-radio-group v-model="form.hasStabilizingMeasures">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
              有保持稳定的措施，确保安全。
            </td>
            <td>
              <el-input v-model="form.judgmentResultStabilizing"></el-input>
            </td>
          </tr>
          <tr>
            <td rowspan="2">2</td>
            <td rowspan="2">安全信息</td>
            <td>
              在显著位置粘贴“机器运转时，请勿靠近”、“机器作业时，防护板应拖地”、“机器运转时，禁止攀爬”等安全警示标志。安全标志应符合GB 10396的相关规定。
            </td>
            <td>
              在显著位置
              <el-radio-group v-model="form.hasWarningLabel">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
              粘贴“机器运转时，请勿靠近”、“机器作业时，防护板应拖地”、“机器运转时，禁止攀爬”等安全警示标志。安全标志
              <el-radio-group v-model="form.compliesGb10396">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
              符合GB 10396的相关规定。
            </td>
            <td>
              <el-input v-model="form.judgmentResultGb"></el-input>
            </td>
          </tr>
          <tr>
            <td>
              使用说明书中应有安全注意事项，产品上设置的安全警示标志应在使用说明书中复现。
            </td>
            <td>
              使用说明书中
              <el-radio-group v-model="form.hasSafetyNotes">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
              有安全注意事项，产品上设置的安全警示标志
              <el-radio-group v-model="form.inUserManual">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
              在使用说明书中复现。
            </td>
            <td>
              <el-input v-model="form.judgmentResultManual"></el-input>
            </td>
          </tr>
        </table>
      </el-form-item>
      <el-form-item label="检查日期">
        <el-date-picker
            v-model="form.checkDate"
            align="right"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      visible: false,
      form: {
        id: '',
        projectCode: null,
        hasSafetyDevice: false,
        judgmentResult: '',
        overlapLength: '',
        isShieldEnveloping: false,
        hasClutchProtection: false,
        judgmentResultClutch: '',
        meetsRequirements: false,
        hasFrontProtection: false,
        frontExtensionDistance: '',
        groundClearanceHeight: '',
        judgmentResultFront: '',
        hasEndProtection: false,
        sideExtensionDistance: '',
        canCoverAboveGround: false,
        fenceGap: '',
        judgmentResultFence: '',
        coversOuterArea: false,
        judgmentResultOuterArea: '',
        coversWholePart: false,
        judgmentResultWholePart: '',
        hasStabilizingMeasures: false,
        judgmentResultStabilizing: '',
        hasWarningLabel: false,
        compliesGb10396: false,
        judgmentResultGb: '',
        hasSafetyNotes: false,
        inUserManual: false,
        judgmentResultManual: '',
        inspectorName: '',
        recorderName: '',
        verifierName: '',
        createdUserId: null,
        checkDate: null,
      },
      projectCodeOptions: [],
      projectCodeMap: {},
    }
  },
  mounted() {
    this.getProductCode();
  },
  methods: {
    changeProjectCode() {
    },
    getProductCode(){
      this.$http({
        url: this.$http.adornUrl('/reportapproval/product/getProjectNumber'),
        method: 'get',
        data: this.$http.adornParams({})
      }).then((data) => {
        if (data && data.code === 0) {
          this.projectCodeOptions = data.productList;
          this.projectCodeOptions.forEach(item => this.projectCodeMap[item.prProjectNumber] = item);
        }else {
          this.$message.error(data.msg)
        }
      })
    },
    init(id) {
      this.form.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs.form.resetFields()
        if (this.form.id) {
          this.$http({
            url: this.$http.adornUrl(`/safetyAssessment/${id}`),
            method: 'get',
          }).then(res => {
            if (res.code === 0) {
              this.form = res.data
            }
          })
        }
      })
    },
    resetForm() {
      this.$refs.form.resetFields();
    },
    // 表单提交
    submit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/safetyAssessment`),
            method: this.form.id ? 'put' : 'post',
            data: this.form
          }).then((data) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style scoped>
table, tr {
  padding: 0;
  margin: 0;
}
th, td {
  margin: 0;
  border: 1px solid black;
  padding: 8px;
  text-align: left;
}
</style>